<template>
  <div class="content">
    <el-container style="height: 100%;">
      <el-aside width="200px">
        <div class="app-title">
          Ukraine Finance System
        </div>
        <el-menu :default-openeds="['1', '3']" :collapse="isCollapse">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>导航一</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>导航二</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-setting"></i>导航三</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="3-1">选项1</el-menu-item>
              <el-menu-item index="3-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="3-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="3-4">
              <template slot="title">选项4</template>
              <el-menu-item index="3-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div class="left"></div>
          <div class="right">
            <div class="item"><i class="el-icon-edit"></i></div>
            <div class="item"><i class="el-icon-share"></i></div>
            <div class="item"><i class="el-icon-delete"></i></div>
            <div class="item">UserName</div>
          </div>
        </el-header>
        <el-main>
          <transition name="wrap">
            <router-view class="wrap"/>
          </transition>
        </el-main>
        <el-footer>
          <span>Copyright © 2021 热爱前端的17号诶</span>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isCollapse: false
    }
  }
}
</script>

<style lang="less">
.content{
  width: 100%;
  height: 100%;
  .app-title{
    height: 60px;
    line-height: 60px;
    font-size: 15px;
    font-weight: 600;
    background-color: #D3DCE6;
  }
}
.el-header {
  background-color: #333744;
  color: #fff;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  .right{
    display: flex;
    .item{
      width: 60px;
      height: 60px;
      text-align: center;
    }
    .item:last-child{
      padding-right: 25px;
      padding-left: 18px;
    }
  }

}
.el-footer{
  background-color: #B3C0D1;
  color: #fff;
  line-height: 60px;
  text-align: center;
}

.el-aside {
  color: #333;
  background-color: #333744;
  line-height: 200px;
}

.el-main {
  background-color: #fff;
  color: #333;
  text-align: center;
  line-height: 40px;
}

body > .el-container {
  margin-bottom: 40px;
}
</style>
